<template>
    <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible"
      :close-on-click-modal="false" draggable>
      <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
       <el-row :gutter="24">

    <el-col :span="12" class="mb20">

      <el-form-item label="站点标识符" prop="siteId">
        <el-input-number :min="1" :max="1000" v-model="form.siteId" placeholder="请输入站点标识符"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="监测设备标识符" prop="monitorEquipmentId">
        <el-input-number :min="1" :max="1000" v-model="form.monitorEquipmentId" placeholder="请输入监测设备标识符"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="记录时间" prop="recordTime">
            <el-date-picker type="datetime" placeholder="请选择记录时间" v-model="form.recordTime" :value-format="dateTimeStr"></el-date-picker>
      </el-form-item>
      </el-col>


    <el-col :span="12" class="mb20">

      <el-form-item label="CO" prop="co">
        <el-input v-model="form.co" placeholder="请输入CO"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="CO标志" prop="flagCo">
        <el-input-number :min="1" :max="1000" v-model="form.flagCo" placeholder="请输入CO标志"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="CO IAQI" prop="iaqiCo">
        <el-input-number :min="1" :max="1000" v-model="form.iaqiCo" placeholder="请输入CO IAQI"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="O3" prop="o3">
        <el-input v-model="form.o3" placeholder="请输入O3"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="O3标志" prop="flagO3">
        <el-input-number :min="1" :max="1000" v-model="form.flagO3" placeholder="请输入O3标志"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="O3 IAQI" prop="iaqiO3">
        <el-input-number :min="1" :max="1000" v-model="form.iaqiO3" placeholder="请输入O3 IAQI"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="AO3" prop="ao3">
        <el-input v-model="form.ao3" placeholder="请输入AO3"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="AO3标志" prop="flagAo3">
        <el-input-number :min="1" :max="1000" v-model="form.flagAo3" placeholder="请输入AO3标志"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="AO3 IAQI" prop="iaqiAo3">
        <el-input-number :min="1" :max="1000" v-model="form.iaqiAo3" placeholder="请输入AO3 IAQI"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="SO2" prop="so2">
        <el-input v-model="form.so2" placeholder="请输入SO2"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="SO2标志" prop="flagSo2">
        <el-input-number :min="1" :max="1000" v-model="form.flagSo2" placeholder="请输入SO2标志"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="SO2 IAQI" prop="iaqiSo2">
        <el-input-number :min="1" :max="1000" v-model="form.iaqiSo2" placeholder="请输入SO2 IAQI"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="NO2" prop="no2">
        <el-input v-model="form.no2" placeholder="请输入NO2"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="NO2标志" prop="flagNo2">
        <el-input-number :min="1" :max="1000" v-model="form.flagNo2" placeholder="请输入NO2标志"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="NO2 IAQI" prop="iaqiNo2">
        <el-input-number :min="1" :max="1000" v-model="form.iaqiNo2" placeholder="请输入NO2 IAQI"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="PM2.5" prop="pm25">
        <el-input v-model="form.pm25" placeholder="请输入PM2.5"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="PM2.5标志" prop="flagPm25">
        <el-input-number :min="1" :max="1000" v-model="form.flagPm25" placeholder="请输入PM2.5标志"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="PM2.5 IAQI" prop="iaqiPm25">
        <el-input-number :min="1" :max="1000" v-model="form.iaqiPm25" placeholder="请输入PM2.5 IAQI"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="APM2.5" prop="apm25">
        <el-input v-model="form.apm25" placeholder="请输入APM2.5"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="APM2.5标志" prop="flagApm25">
        <el-input-number :min="1" :max="1000" v-model="form.flagApm25" placeholder="请输入APM2.5标志"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="APM2.5 IAQI" prop="iaqiApm25">
        <el-input-number :min="1" :max="1000" v-model="form.iaqiApm25" placeholder="请输入APM2.5 IAQI"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="PM10" prop="pm10">
        <el-input v-model="form.pm10" placeholder="请输入PM10"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="PM10标志" prop="flagPm10">
        <el-input-number :min="1" :max="1000" v-model="form.flagPm10" placeholder="请输入PM10标志"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="PM10 IAQI" prop="iaqiPm10">
        <el-input-number :min="1" :max="1000" v-model="form.iaqiPm10" placeholder="请输入PM10 IAQI"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="APM10" prop="apm10">
        <el-input v-model="form.apm10" placeholder="请输入APM10"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="APM10标志" prop="flagApm10">
        <el-input-number :min="1" :max="1000" v-model="form.flagApm10" placeholder="请输入APM10标志"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="APM10 IAQI" prop="iaqiApm10">
        <el-input-number :min="1" :max="1000" v-model="form.iaqiApm10" placeholder="请输入APM10 IAQI"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="AQI" prop="aqi">
        <el-input-number :min="1" :max="1000" v-model="form.aqi" placeholder="请输入AQI"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="AQCI" prop="aqci">
        <el-input v-model="form.aqci" placeholder="请输入AQCI"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="主要值" prop="primaryKey">
        <el-input v-model="form.primaryKey" placeholder="请输入主要值"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="温度" prop="temperature">
        <el-input v-model="form.temperature" placeholder="请输入温度"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="湿度" prop="humidity">
        <el-input v-model="form.humidity" placeholder="请输入湿度"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="风速" prop="windSpeed">
        <el-input v-model="form.windSpeed" placeholder="请输入风速"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="风向" prop="windDirection">
        <el-input-number :min="1" :max="1000" v-model="form.windDirection" placeholder="请输入风向"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="光照" prop="illumination">
        <el-input v-model="form.illumination" placeholder="请输入光照"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="大气压" prop="atmosphericPressure">
        <el-input v-model="form.atmosphericPressure" placeholder="请输入大气压"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="扩展1" prop="ext01">
        <el-input v-model="form.ext01" placeholder="请输入扩展1"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="扩展2" prop="ext02">
        <el-input v-model="form.ext02" placeholder="请输入扩展2"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="扩展3" prop="ext03">
        <el-input v-model="form.ext03" placeholder="请输入扩展3"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="扩展4" prop="ext04">
        <el-input v-model="form.ext04" placeholder="请输入扩展4"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="扩展5" prop="ext05">
        <el-input v-model="form.ext05" placeholder="请输入扩展5"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="扩展6" prop="ext06">
        <el-input v-model="form.ext06" placeholder="请输入扩展6"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="扩展7" prop="ext07">
        <el-input v-model="form.ext07" placeholder="请输入扩展7"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="扩展8" prop="ext08">
        <el-input v-model="form.ext08" placeholder="请输入扩展8"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="扩展9" prop="ext09">
        <el-input v-model="form.ext09" placeholder="请输入扩展9"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="扩展10" prop="ext10">
        <el-input v-model="form.ext10" placeholder="请输入扩展10"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="计数" prop="count">
        <el-input-number :min="1" :max="1000" v-model="form.count" placeholder="请输入计数"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="状态" prop="status">
        <el-input-number :min="1" :max="1000" v-model="form.status" placeholder="请输入状态"></el-input-number>
      </el-form-item>
    </el-col>

    <el-col :span="12" class="mb20">

      <el-form-item label="注释" prop="comments">
        <el-input v-model="form.comments" placeholder="请输入注释"/>
      </el-form-item>
      </el-col>

			</el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
        </span>
      </template>
    </el-dialog>
</template>

<script setup lang="ts" name="AirRealTimeDataDialog">
import { useDict } from '/@/hooks/dict';
import { useMessage } from "/@/hooks/message";
import { getObj, addObj, putObj } from '/@/api/platform/airRealTimeData'
import { rule } from '/@/utils/validate';
const emit = defineEmits(['refresh']);

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false)
const loading = ref(false)
// 定义字典

// 提交表单数据
const form = reactive({
		id:'',
		siteId: 0,
		monitorEquipmentId: 0,
	  recordTime: '',
	  co: '',
		flagCo: 0,
		iaqiCo: 0,
	  o3: '',
		flagO3: 0,
		iaqiO3: 0,
	  ao3: '',
		flagAo3: 0,
		iaqiAo3: 0,
	  so2: '',
		flagSo2: 0,
		iaqiSo2: 0,
	  no2: '',
		flagNo2: 0,
		iaqiNo2: 0,
	  pm25: '',
		flagPm25: 0,
		iaqiPm25: 0,
	  apm25: '',
		flagApm25: 0,
		iaqiApm25: 0,
	  pm10: '',
		flagPm10: 0,
		iaqiPm10: 0,
	  apm10: '',
		flagApm10: 0,
		iaqiApm10: 0,
		aqi: 0,
	  aqci: '',
	  primaryKey: '',
	  temperature: '',
	  humidity: '',
	  windSpeed: '',
		windDirection: 0,
	  illumination: '',
	  atmosphericPressure: '',
	  ext01: '',
	  ext02: '',
	  ext03: '',
	  ext04: '',
	  ext05: '',
	  ext06: '',
	  ext07: '',
	  ext08: '',
	  ext09: '',
	  ext10: '',
		count: 0,
		status: 0,
	  comments: '',
});

// 定义校验规则
const dataRules = ref({
})

// 打开弹窗
const openDialog = (id: string) => {
  visible.value = true
  form.id = ''

  // 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields();
	});

  // 获取airRealTimeData信息
  if (id) {
    form.id = id
    getairRealTimeDataData(id)
  }
};

// 提交
const onSubmit = async () => {
	const valid = await dataFormRef.value.validate().catch(() => {});
	if (!valid) return false;

	try {
    loading.value = true;
		form.id ? await putObj(form) : await addObj(form);
		useMessage().success(form.id ? '修改成功' : '添加成功');
		visible.value = false;
		emit('refresh');
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
    loading.value = false;
  }
};


// 初始化表单数据
const getairRealTimeDataData = (id: string) => {
  // 获取数据
  loading.value = true
  getObj(id).then((res: any) => {
    Object.assign(form, res.data)
  }).finally(() => {
    loading.value = false
  })
};

// 暴露变量
defineExpose({
  openDialog
});
</script>